<script lang="ts" setup>
import { debounce } from 'lodash-es';
// hooks
import useSelect from '@/hooks/select';
// 组件
import ImageBox from '@/components-rc/imageBox.vue';
import flipX from '@/components-rc/flipX.vue';
import flipY from '@/components-rc/flipY.vue';
import move from '@/components-rc/move.vue';
import align from '@/components-rc/align.vue';
import stylee from '@/components-rc/stylee.vue';
import fontFamily from '@/components-rc/fontFamily.vue';
import color from '@/components-rc/color.vue';

import clone from '@/components/clone.vue';
import dele from '@/components/del.vue';
import replaceImg from '@/components/replaceImg.vue';
import cropperImg from '@/components/cropperImg.vue';

// 文字元素
const textType = ['i-text', 'textbox', 'text'];
const { canvasEditor, selectType, isMatchType, isOne } = useSelect(textType);
const state = reactive({
  top: 200,
  left: 100,
  show: false,
});

const init = () => {
  const activeObject = canvasEditor.canvas.getActiveObject();

  if (!activeObject) return;
  activeObject.on('moving', calcSelectPosition);
  activeObject.on('rotating', calcSelectPosition);
  activeObject.on('scaling', calcSelectPosition);
  calcSelectPosition(activeObject);
};

const calcSelectPosition = debounce(() => {
  const activeObject = canvasEditor.canvas.getActiveObject();
  if (!activeObject) return;

  const scale = canvasEditor.canvas.getZoom();

  // 1. 获取元素在画布中的中心点坐标（基于画布坐标系）
  // fabric 元素的位置通常以中心点为基准（如果centeredRotation为true）
  const objectLeft = activeObject.left * scale;
  const objectTop = activeObject.top * scale;

  // 获取选中元素的缩放之后的宽高
  const width = activeObject.width * scale;
  const height = activeObject.height * scale;

  // 4. 获取画布在页面中的位置（DOM元素的绝对位置）
  const canvasElement = canvasEditor.canvas.getElement();
  const canvasRect = canvasElement.getBoundingClientRect();

  // 工作去相对于左上角的距离
  const viewportTransform = canvasEditor.canvas.viewportTransform;
  const workspaceLeft = viewportTransform[4];
  const workspaceTop = viewportTransform[5];

  // 5. 计算元素左上角在页面中的绝对坐标
  // 注意：需要加上页面滚动偏移量（如果页面可滚动）
  const pageX = workspaceLeft + canvasRect.left + objectLeft + window.scrollX;
  const pageY = workspaceTop + canvasRect.top + objectTop + window.scrollY;

  console.log(
    objectLeft,
    objectTop,
    canvasEditor.canvas.viewportTransform,
    canvasEditor.canvas.getZoom()
  );

  state.top = pageY - 45;
  state.left = pageX;
  state.show = true;
}, 300);

const handleSelectCancel = () => {
  console.log('cancel');
  state.show = false;
};

onMounted(() => {
  canvasEditor.on('selectOne', init);
  canvasEditor.on('selectCancel', handleSelectCancel);
  // 画布缩放事件监听
  canvasEditor.canvas.on('mouse:wheel', calcSelectPosition);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectOne', init);
  canvasEditor.off('selectCancel', handleSelectCancel);
  canvasEditor.canvas.off('mouse:wheel', calcSelectPosition);
});
</script>

<template>
  <!-- 选中单个元素的, 图片 -->
  <div
    v-show="isOne && state.show"
    class="floot-bar-container"
    :style="{ top: `${state.top}px`, left: `${state.left}px` }"
  >
    <!-- 图片 -->
    <ul class="options-list" v-show="selectType === 'image'">
      <li>
        <clone />
      </li>
      <li>
        <dele />
      </li>
      <li class="line"></li>
      <li>
        <Tooltip content="抠图" placement="top">
          <Icon class="options-item" type="ios-person" size="22" />
        </Tooltip>
      </li>
      <li>
        <replaceImg />
      </li>
      <li>
        <cropperImg />
      </li>
      <li class="add-img-box">
        <ImageBox />
      </li>
      <li class="line"></li>
      <move />
      <li class="line"></li>
      <li>
        <flipX />
      </li>
      <li>
        <flipY />
      </li>
      <li>
        <Tooltip content="更多" placement="top">
          <Icon class="options-item to-one-down" type="md-more" size="20" />
        </Tooltip>
      </li>
    </ul>
    <!-- 文字 -->
    <ul class="options-list" v-show="isMatchType">
      <li>
        <clone />
      </li>
      <li>
        <dele />
      </li>
      <li class="line"></li>
      <fontFamily />
      <color />
      <li class="line"></li>
      <li class="width-40">
        <align />
      </li>
      <li class="width-40">
        <stylee />
      </li>
      <!-- 字体、字号、行高、间距 对齐、样式 -->
      <li class="line"></li>
      <move />
      <li class="line"></li>
      <li>
        <flipX />
      </li>
      <li>
        <flipY />
      </li>
      <li>
        <Tooltip content="更多" placement="top">
          <Icon class="options-item to-one-down" type="md-more" size="20" />
        </Tooltip>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.floot-bar-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  height: 35px;
  border-radius: 4px;
  border: 1px solid var(--color--border-float);
  background-color: var(--background-white-color);
  box-shadow: var(--shadow-m);
  transition: all 0.3s ease-in-out;

  :deep(.options-list) {
    height: 100%;
    padding: 5px;
    display: flex;
    align-items: center;

    > li {
      height: 100%;
      width: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
      background-color: var(--background-white-color);
      cursor: pointer;
      margin-left: 2px;
      position: relative;

      &.width-40 {
        width: 40px;
      }

      &.line {
        width: 1px;
        background-color: var(--color--border-float);
      }

      &.add-img-box {
        width: auto;

        span {
          font-size: 12px;
          font-weight: bold;
          padding: 0 5px;
          background-color: var(--background-primary-color);
          border-radius: 4px;
        }
      }

      &:first-child {
        margin-left: 0;
      }

      &:hover {
        background-color: var(--background-primary-color);

        .options-item {
          color: var(--primary-color);
        }
        .ivu-tooltip-rel > svg {
          fill: var(--primary-color);
        }
      }

      :deep(.options-item) {
        color: var(--color-text-block);
      }
      svg {
        fill: var(--color-text-block);
        margin-top: -4px;
      }
    }
  }
}
</style>
